{literal}
<script type="text/javascript">
	$(document).ready(function() {

		$('#promoForm').bootstrapValidator({
			fields : {
				precio : {
					validators : {
						digits : {
							message : 'El precio solo pueden ser numeros'
						},
						notEmpty : {
							message : 'Ingrese un precio por favor'
						}
					}
				},
				creditos : {
					validators : {
						notEmpty : {
							message : 'Ingrese la cantidad de creditos por favor'
						}
					}
				},
				descripcion : {
					validators : {
						notEmpty : {
							message : 'Ingrese una descripcion por favor'
						}
					}
				}
				
			}
		});
		$("#nuevaBtn").click(
				function() {
					$('#modalLabel').html('Nueva promoci&oacute;n');
					$('#accion').val("alta");
					$('#idPromo').val("");
					$('#descripcion').val("");
					$('#creditos').val("");
					$('#precio').val("");
					$('#meses').val("1");
					$('#promoModal').modal();
					$("#idPromoDiv").hide();
				    	
				});
		$("#deleteBtn").click(
				function() {
					var id = $("#idPromo").val();
					// Returns successful data submission message when the entered information is stored in database.
					var dataString = 'idPromo=' + id;
//								+ '&accion=' + accion;
					$.ajax({
						type : "POST",
						url : "promocion.php?operacion=delete",
						data : dataString,
						cache : false,
						success : function(result) {
							var deletePromoJson = jQuery.parseJSON( result );
							$("#tablaa").bootstrapTable('remove', {
					            field: 'id',
					            values: id
					        });
							$('#deleteModal').modal('toggle');

						}
					});
					return false;
				});
		$('#libre').change(function() {
		    if($(this).is(":checked")) {
		    	$('#creditos').val('0');
//		     	$('#creditosDiv').css("display","none");
		    	$('#creditosDiv').hide();
				$('#mesesDiv').show();
		    }else{
//		     	$('#creditosDiv').css("display","block");
				$('#creditosDiv').show();
		    	$('#mesesDiv').hide();
		    	$('#creditos').focus();
		    }
		});

		$("#confirmar").click(
							function() {
								
								$('#promoForm')
								.data('bootstrapValidator').validate();
								if(!$('#promoForm')
										.data('bootstrapValidator').isValid()){
									return;
								}
								
								var id = $("#idPromo").val();
								var descripcion = $("#descripcion").val();
								var creditos = $("#creditos").val();
								var precio = $("#precio").val();
								var meses = $("#meses").val();
								var accion = $("#accion").val();
								var libre = $("#libre").prop( "checked" );
								// Returns successful data submission message when the entered information is stored in database.
								var dataString = 'idPromo=' + id + '&descripcion='
										+ descripcion + '&creditos=' + creditos
										+ '&precio=' + precio
										+ '&meses=' + meses
										+ '&libre=' + libre;
//		 								+ '&accion=' + accion;
								$.ajax({
									type : "POST",
									url : "promocion.php?operacion="+accion,
									data : dataString,
									cache : false,
									success : function(result) {
										var newPromoJson = jQuery.parseJSON( result );
											var creditos = newPromoJson.libre == 'S' ? 'Libre':newPromoJson.creditos;
										if(accion == 'alta'){
											$("#tablaa").bootstrapTable('insertRow', {
									            index: 0,
									            row: newPromoJson
									        });
										}else{
											$("#tablaa").bootstrapTable('updateRow', {
									            index: indice,
									            row: newPromoJson
									        });						
										}
										$('#promoModal').modal('toggle');
									}
								});
								return false;
							});

	});

function editar(id){
	$('#modalLabel').html('Editar promoci&oacute;n Nro ' + id );
	var dataString = 'idPromo=' + id;
$.ajax({
type : "POST",
url : "promocion.php?operacion=getById",
data : dataString,
cache : false,
success : function(result) {
	var promoJson = jQuery.parseJSON( result );
	$('#accion').val("update");
	$('#idPromo').val(promoJson.id);
	$('#descripcion').val(promoJson.descripcion);
	$('#creditos').val(promoJson.creditos);
	$('#precio').val(promoJson.precio);
	$('#meses').val(promoJson.meses);
	if(promoJson.libre === 'S'){
		$('#libre').prop('checked', true);
// 		$('#creditosDiv').css("display","none");
		$('#creditosDiv').hide();
		$('#mesesDiv').show();
	}else{
		$('#libre').prop('checked', false);
// 		$('#creditosDiv').css("display","block");
		$('#creditosDiv').show();
		$('#mesesDiv').hide();
	}
	$("#idPromoDiv").show();
}
});
	
	$('#promoModal').modal("show");	
}

function eliminar(id){
	$('#idDelete').html(id);
	$('#idPromo').val(id);
	$('#deleteModal').modal("show");	
}

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
function creditFormatter(value) {
    if(value==0)
	{
    	return 'Libre';
	}else{
		return value;
	}
}

function operateFormatter(value, row, index) {
    return [
        '<a class="edit" href="javascript:void(0)" title="Editar">',
        '<i class="glyphicon glyphicon-edit"></i>',
        '</a>  ',
        '<a class="remove" href="javascript:void(0)" title="Eliminar">',
        '<i class="glyphicon glyphicon-remove"></i>',
        '</a>'
    ].join('');
}
window.operateEvents = {
    'click .edit': function (e, value, row, index) {
    	indice = index;
        editar(row.id);
    },
    'click .remove': function (e, value, row, index) {
        eliminar(row.id);
    }
};
</script>

{/literal}
<div id="toolbar">
<button  id=nuevaBtn type="button" class="btn btn-primary">Nueva
				promoci&oacute;n</button>
</div>
<table data-toggle="table"
       data-toolbar="#toolbar"
       data-url="promocion.php?operacion=getPromos" id="tablaa" 
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-height="350"
       class="table table-striped">
    <thead>
    <tr>
        <th data-field="id">ID</th>
        <th data-field="descripcion">Descripci&oacute;n</th>
        <th data-field="creditos" data-formatter="creditFormatter">Creditos</th>
        <th data-field="precio">Precio</th>
        <th data-formatter="operateFormatter" data-events="operateEvents"></th>
    </tr>
    </thead>
</table>

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="1" role="dialog"
	aria-labelledby="deleteModalLabelled" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Eliminar...</h4>
			</div>
			<div class="modal-body">
				Esta seguro que desea eliminar la promoci&oacute;n nro <span
					id="idDelete"></span>
			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
				<button type="button" class="btn btn-danger" id="deleteBtn">Eliminar</button>
			</div>
		</div>
	</div>
</div>
      
<!-- Modal -->
<div class="modal fade" id="promoModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="modalLabel"></h4>
			</div>
			<div class="modal-body">


				<form role="form" action="promocion.php" id="promoForm"
					method="post">

					<input type="hidden" id="accion" name="accion">
					<div class="form-group" id="idPromoDiv" style="display: none;">
						<label for="idPromo">ID</label> <input type="text"
							class="form-control" id="idPromo" name="idPromo" disabled>
					</div>

					<div class="form-group">
						<label for="descripcion">Descripci&oacute;n</label> <input
							type="text" class="form-control" id="descripcion"
							name="descripcion" placeholder="Ingrese la descripci&oacute;n">
					</div>
					<div class="form-group"
						style="padding-bottom: 20px; padding-top: 20px;">
						<label for="libre" class="col-lg-1 control-label"
							style="padding-left: 3px;">Libre</label>
						<div class="col-lg-3">
							<input type="checkbox" id="libre" name="libre">
						</div>
						
						<div class="col-lg-7"  id="mesesDiv" style="display: none;">
					<div class="form-group"	>
						<label for="meses" class="col-lg-5 control-label"> Meses</label>
							<div class="input-group spinner" data-trigger="spinner" >
								<input type="text" class="form-control" value="1"
									data-rule="month" id="meses">
								<div class="input-group-addon">
									<a href="javascript:;" class="spin-up" data-spin="up"><i
										class="icon-sort-up">+</i></a> <a href="javascript:;"
										class="spin-down" data-spin="down"><i
										class="icon-sort-down">-</i></a>
								</div></div>
							</div>
						</div>
					</div>


				
					<div class="form-group" id="creditosDiv">
						<label for="creditos">Creditos</label> <input type="text"
							class="form-control" id="creditos" name="creditos"
							placeholder="Cantidad de creditos">
					</div>
					<div class="form-group">
						<label for="precio">Precio</label> <input type="text"
							class="form-control" id="precio" name="precio"
							placeholder="Precio total">
					</div>

				</form>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
					<button type="button" class="btn btn-primary" id="confirmar">Confirmar</button>
				</div>
			</div>
		</div>
	</div>